<template>
	<div class="recommend-area">
		<div id="slider">
			<swiper :options="swiperOptionA" ref="mySwiper">
				<swiper-slide>
					<img :src='require("../../../assets/test.png")' style="width:100%">
				</swiper-slide>
				<swiper-slide>
					<img v-lazy='require("../../../assets/test.png")' style="width:100%">
				</swiper-slide>
				<swiper-slide>
					<img v-lazy='require("../../../assets/test.png")' style="width:100%">
				</swiper-slide>
				
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
		<div class="recommend-playLists-area">
	      <h1 class="title">推荐歌单</h1>
	      <v-play-lists :vPlayListsArr="vPlayListsArr" @connect="connect"></v-play-lists>
	    </div>
	</div>
</template>

<script>
import {swiper, swiperSlide, SwiperItem} from 'vue-awesome-swiper';
import api from 'myApi';
import vPlayLists from './recommendList';

export default{
	components: {swiper, swiperSlide, SwiperItem, vPlayLists},
	data() {
		return {
			swiperOptionA: {
                notNextTick: true,
                pagination: '.swiper-pagination',
                autoHeight: true,
                autoplay: 3600,
                speed: 800,
                // 用户操作swiper之后，是否禁止autoplay。默认为true：停止
                autoplayDisableOnInteraction: true,
                centeredSlides: true,
                paginationClickable: true,
                spaceBetween: 0,
                onSlideChangeStart: swiper => {
					// console.log('2222');
                }
            },
            vPlayListsArr: []
		};
	},
	beforeMount() {
		api.getPersonalizedResource().then(res => {
			return (res.data);
		}).then(res => {
			this.vPlayListsArr = res.result.slice(0, 6);
		}, err => {
			throw new Error(err);
		});
	},
	methods: {
		connect(arg) {
			this.$emit('connect', arg);
		}
    }
};
</script>
<style>
@import 'swiper/dist/css/swiper.css';
</style>
<style lang="scss">
@import 'musicCol.scss'
</style>
